<template>
  <view id="main">
    <!-- 顶部搜索框 -->
    <zy-topBar searchwidth="90%" scarchBottom showBack v-model="searchParam" @search="search" title="设施信息"
      paddingTop="50" height="40">
      <template #right>
        <view @tap="addWeighbridge" class="fs_12">添加地磅</view>
      </template>
    </zy-topBar>
    <zy-tab :scrollable="true" lineColor="#0077FF" :activeStyle="{
      fontWeight: 'bold',
      transform: 'scale(1.1)',
      color: '#0077FF',
    }" lineWidth="120rpx" @click-tab="changeTab" v-model="current" :data="list"></zy-tab>
    <view class="content">
      <scroll-view scroll-y>
        <view v-if="current === '1'">
          <view v-for="item in cerrentList" class="item card">
            <view class="title flex">
              <view class="fs_14">{{ item.typename }}</view>
              <view class="fs_12 color_text_gray">{{ item.time }}</view>
            </view>
            <view class="body">
              <view class="body_item flex">
                <view class="label">设备编号</view>
                <view class="value">{{ item.ID }}</view>
              </view>
              <view class="body_item flex">
                <view class="label">MAC地址</view>
                <view class="value">{{ item.MacAddress }}</view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="current === '2'">
          <view v-for="item in cerrentList" class="item card">
            <view class="title flex">
              <view class="fs_14">{{ item.name }}</view>
              <view class="fs_12 color_text_gray">{{ item.time }}</view>
            </view>
            <view class="body">
              <view class="body_item flex">
                <view class="label">设备型号</view>
                <view class="value">{{ item.type }}</view>
              </view>
              <view class="body_item flex">
                <view class="label">MAC地址</view>
                <view class="value">{{ item.Mactype }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useEquipmentStore } from "@/stores/modules/equipment/equipment";
const equipmentStore = useEquipmentStore();
const list = [
  { value: "1", name: "地磅" },
  { value: "2", name: "打印机" },
];
const searchParam = ref("");
const search = (val: string) => {
  console.log(val);
};
// 添加地磅
const addWeighbridge = () => {
  uni.navigateTo({
    url: "/pages/index/equipment/addEquipment/addEquipment",
  });
};
// tab切换
const current = ref("1"); // 当前tab索引
const cerrentList = ref(equipmentStore.weighbridgeList);
onMounted(() => {
});
const changeTab = async (e: any) => {
  console.log(e);
  switch (e.value) {
    case "1":
      cerrentList.value = equipmentStore.weighbridgeList;
      break;
    case "2":
      cerrentList.value = equipmentStore.printerList;
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
scroll-view {
  height: calc(100vh - 148px);

  .item {
    width: 92%;
    margin: 20px auto;

    .title {
      justify-content: space-between;
    }

    .body {
      margin: 10px 0;

      .body_item {
        font-size: 14px;
        margin-bottom: 10px;

        .label {
          margin-right: 10px;
          color: #7C8190;
        }

        .value {
          color: #1D2541;
        }
      }
    }
  }
}
</style>
